﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>随机点名PK直播</title>
</head>

<style>
	.pname {
		font-family: "微软雅黑";
		font-size: 20px;
		background: #D1D3D6;
		width: 70px;
		padding: 20px;
		position: relative;
		display: inline-block;
	}
	
	.vs {
		font-family: "微软雅黑";
		font-size: 20px;
		color: red;
		position: relative;
		display: inline-block;
	}
	
	.pkbtn {
		font-family: "微软雅黑";
		font-size: 28px;
		background: linear-gradient(rgba(219, 219, 219, 0.9) 48%, rgba(169, 169, 169, 0.7) 48%);
		border-radius: 3px;
		width: 100px;
		border-style: solid;
		border-width: thin;
		border-color: darkgreen;
		position: relative;
		margin: auto;
		cursor: pointer;
	}
	
	.pkcontent {
		font-family: "微软雅黑";
		font-size: 16px;
		border-radius: 3px;
		width: 600px;
		position: relative;
		margin: auto;
	}
</style>



<body>
	<p style="">
		<div class="pname" style="left:500px">键盘侠</div>
		<div class="vs" style="left: 550px;">VS</div>
		<div class="pname" style="left:600px">小龙虾</div>
	</p>
	<p></p>
	<p>
		<div class="pkbtn" onclick="startPK()">开始PK</div>
	</p>
	<p>
		<div class="pkcontent">

		</div>
	</p>
	<div id="msg_end" style="height:0px; overflow:hidden"></div>

	
</body>
<script>
	var isPking = false;
	var namelist = ["赵义明","闫韩","司萌","刘曼","拜辰","朱志豪","周博文","魏其上","李炎","李京龙","轩璐",
	"孟晓琳","李自胜","张晓涛","白鹏真","李鹏举","王卫阵","张真真","刘斌","陈俊如","陈佳","彭清峰","🐰马伟博🐰","陈彩虹",
	"刘川","赵鹏","唐从粮","赵开","蔡鳯樂","高冬雪","李静","樊好山","吴俊","千伟利","侯艳","王路坦",
	"张晓莹","余俊","薛虔","王灵可","李锦鹏","唐必富","周文凯"]; //42个
	
	var sklist = ["发起了猛烈的进攻，打的他满地找牙, 对方损失了",
				"使用了大招，对方的假发被打掉了！损失了",
				"使用了魅惑技能，对方被迷的神魂颠倒，瞬间掉了2W的粉丝，损失了",
				"查看了葵花宝典，逼格提升了51%，对方被吓破了胆，损失了",
				"炫耀了他的大块肌肉，对方损失了",
				"狠狠的鄙视了对方一下，造成了巨大伤害，对方损失",
				"使用了情侣花式虐狗秀恩爱，一下子打中了对方的小心脏，对方损失"
				];
	window.onload = function() {
		var index = parseInt(Math.random()*42);
		var oPerson1 = document.getElementsByClassName("pname")[0];
		oPerson1.innerHTML = namelist[index];
		
		index = parseInt(Math.random()*42);
		var oPerson2 = document.getElementsByClassName("pname")[1];
		oPerson2.innerHTML = "闫韩";
		//页面加载完的时候
		
	}
	
	function startPK(){
		if(isPking) {
			return;
		}
		
		isPking = true;
		var oContent = document.getElementsByClassName("pkcontent")[0];
		oContent.innerHTML = "";
		var times = 1;//当前是第几轮攻击
		var turn = 1;//轮到谁攻击，1 是 A  -1 是 B
		var oPerson1 = document.getElementsByClassName("pname")[0];
		oPerson1.hp = 100;//设置血量
		var oPerson2 = document.getElementsByClassName("pname")[1];
		oPerson2.hp = 1100000000000;//设置血量
		var timer = setInterval(fight,200);
		
		function fight() {
			var oP = document.createElement("p");
			var kill = sklist[parseInt(Math.random()*7)]; //本轮使用的技能
			var damage = parseInt(Math.random()*30); //本轮造成的伤害
			if(turn > 0) {
				oP.innerHTML = "第"+times+"轮：【"+oPerson1.innerHTML+"】"+kill+damage+"点血量";
				oPerson2.hp -= damage;
			} else {
				oP.innerHTML = "第"+times+"轮：【"+"闫韩"+"】"+kill+damage+"点血量";
				oPerson1.hp -= damage;
			}
			oContent.appendChild(oP);
			if(oPerson1.hp <= 0 || oPerson2.hp <= 0) {
				clearInterval(timer);//清理定时器
				var over = document.createElement("p");
				over.style.color = "red";
				over.innerHTML = (oPerson1.hp < 0 ? oPerson1.innerHTML : oPerson2.innerHTML) +"精疲力尽，挂掉了！";
				oContent.appendChild(over);//增加最后一行，输出游戏结束
				isPking = false; //打斗标识设为false,标识打完了
			} 
			times++; //进入下一轮攻击
			turn *= -1; //转为下一个人攻击
			document.getElementById("msg_end").scrollIntoView();//滚动条自动滚动至底部
		}
		
	}

</script>

</html>